<template>
  <confirm-bar :visible="tagBarVisible">
    <template #content>
      添加标签:&nbsp;已选&nbsp;{{ selectedRowKeys.length }}&nbsp;项
    </template>
    <template #handle>
      <a-tooltip>
        <template #title v-if="tipText">{{ tipText }} </template>
        <a-cascader
          v-model:value="tags"
          multiple
          size="small"
          max-tag-count="responsive"
          :options="options"
          :loading="loadingOptions"
          placeholder="请选择标签"
          :show-checked-strategy="Cascader.SHOW_CHILD"
          labelInValue
          @change="onChangeTag"
          :fieldNames="{ label: 'title', value: 'key' }"
        ></a-cascader>
      </a-tooltip>
      <a-button type="link" @click="onCancel">取消</a-button>
      <a-button
        type="link"
        @click="onConfirm"
        :loading="loading"
        :disabled="selectedRowKeys.length === 0 || tags.length === 0"
      >
        确认添加
      </a-button>
    </template>
  </confirm-bar>
</template>
<script setup>
import { onMounted, ref, watch } from 'vue'
import { message, Cascader } from 'ant-design-vue'
import ConfirmBar from '@/components/confirm-bar/confirm-bar.vue'
import {
  useRowSelectionActive,
  useRowSelection,
  useLockForInUse,
  useTagBarVisible,
  useTreeSelectedInfo,
} from './provide-context.js'
import { getTagTree, addTagsToFile } from '@/api/tag.js'
import mockAPI from '@/api/simple-mock.js'
/**
 * 全局
 */
let rowSelectionActive = useRowSelectionActive()
let rowSelection = useRowSelection()
let { selectedRowKeys, selectedRowInfos } = rowSelection
let lockForInUse = useLockForInUse()
let tagBarVisible = useTagBarVisible()
let treeSelectedInfo = useTreeSelectedInfo()
/**
 * 操作逻辑
 */
let loading = ref(false)
function onCancel() {
  tagBarVisible.value = false
  rowSelectionActive.value = false
  lockForInUse.value = null
  // delete rowSelection.getCheckboxProps
}

if (treeSelectedInfo) {
  watch(treeSelectedInfo, onCancel)
}

async function onConfirm() {
  loading.value = true
  try {
    await Promise.all(
      selectedRowInfos.value.map(({ fileId }) => {
        return addTagsToFile({ tagIds: getTagLeafs(), fileId })
      }),
    )

    // await addTagsToFile({ tagIds:tags, rowSelectionActive })

    // selectedRowKeys.value.forEach(id => {
    //   downloadFile({ id })
    //     .then(downloadFormBlob)
    //     .catch(() => {
    //       message.error(`下载失败<${id}>`)
    //     })
    // })
    tagBarVisible.value = false
    rowSelectionActive.value = false
    lockForInUse.value = null
    // delete rowSelection.getCheckboxProps
  } catch (e) {
    console.log(e)
  }
  loading.value = false
}

/**
 * 查询标签内容
 */
let loadingOptions = ref(false)
let options = ref([])
onMounted(async () => {
  loadingOptions.value = true
  try {
    let result = await getTagTree()
    options.value = result?.data || []
  } catch (e) {}
  loadingOptions.value = false
})
let tags = ref([])
let tipText = ref()
function onChangeTag(tags, info) {
  tipText.value = info
    .map(item => {
      return [...item].pop().title
    })
    .join(',')
}

function getTagLeafs() {
  return tags.value.map(item => {
    return [...item].pop()
  })
}
</script>
